<template>
  <div class="operlog-search">
    <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="操作地址">
        <el-input v-model="formInline.address" placeholder="请输入操作地址" style="width: 135px;" clearable />
        </el-form-item>
        <el-form-item label="系统模块">
        <el-input v-model="formInline.osmode" placeholder="请输入系统模块" style="width: 135px;" clearable />
        </el-form-item>
        <el-form-item label="操作人员">
        <el-input v-model="formInline.opman" placeholder="请输入操作人员" style="width: 135px;" clearable />
        </el-form-item>
        <el-form-item label="类型">
            <el-select v-model="formInline.cla" placeholder="选择操作" style="width: 135px;">
                <el-option label="新增" value="add" />
                <el-option label="删除" value="subt" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formInline.res" placeholder="选择状态" style="width: 135px; margin-left: 30px;">
                <el-option label="成功" value="suc" />
                <el-option label="失败" value="fail" />
            </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
            <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="选择时间"
                clearable
                style="width: 135px;"
            />
            </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="Search">搜索</el-button>
        <el-button icon="Delete" @click="reset()">重置</el-button>
        </el-form-item>
    </el-form>
  </div>
  <div class="operlog-table">
      <el-table :data="tableData" style="width: 900px; overflow-x: auto !important; margin: 0 auto;">
          <el-table-column prop="num" label="日志编号" width="120"/>
          <el-table-column prop="osMode" label="系统模块" width="120"/>
          <el-table-column prop="opType" label="操作类型" width="120"/>
          <el-table-column prop="opMan" label="操作人员" width="120"/>
          <el-table-column prop="addre" label="操作地址" width="120"/>
          <el-table-column prop="pos" label="操作地点" width="120"/>
          <el-table-column prop="stau" label="操作状态" width="120"/>
          <el-table-column prop="opDate" label="操作日期" width="120"/>
          <el-table-column fixed="right" label="详情" >
              <template #default="scope">
                  <el-button link type="primary" icon="ChatDotRound" @click="detail(scope.$index)">
                  详情
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
const formInline = reactive({
  address: '',
  osmode: '',
  opman: '',
  cla: '',
  res: '',
  date: ''
})
function reset() {
  formInline.address = '';
  formInline.osmode = '';
  formInline.opman = '';
  formInline.cla = '';
  formInline.res = '';
  formInline.date = '';
  
  

}
const tableData = [
  {
    num: '1',
    osMode: '代码生成',
    opType: '生成代码',
    opMan: 'czh',
    addre: '192.1.1',
    pos: '郑州市',
    stau: '成功',
    opDate: '2014-11-11',
  },
  {
    num: '2',
    osMode: '代码生成',
    opType: '生成代码',
    opMan: 'czh',
    addre: '192.1.1',
    pos: '郑州市',
    stau: '成功',
    opDate: '2014-11-11',
  },
  {
    num: '3',
    osMode: '代码生成',
    opType: '生成代码',
    opMan: 'czh',
    addre: '192.1.1',
    pos: '郑州市',
    stau: '成功',
    opDate: '2014-11-11',
  },
  {
    num: '4',
    osMode: '代码生成',
    opType: '生成代码',
    opMan: 'czh',
    addre: '192.1.1',
    pos: '郑州市',
    stau: '成功',
    opDate: '2014-11-11',
  },
]

function detail(n) {
  ElMessageBox.alert(
    "日志编号:"+tableData[n].num+"\n系统模块:"+tableData[n].osMode+"\n操作类型:"+tableData[n].opType+"\n操作人员:"+tableData[n].opMan+"\n操作地址:"+tableData[n].addre+"\n操作地点:"+tableData[n].pos+"\n操作状态："+tableData[n].stau+"\n操作日期："+tableData[n].opDate,
  )
}
</script>

<style scoped>
.operlog-search{ width: 950px; margin: 30px 0 30px 250px;}
</style>